<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <!-- 这里的fn只要页面重新渲染就会执行，例如data中的数据更新了 -->
        <h2>{{fn()}}</h2>
        <!-- 这里的计算属性只会在依赖发生改变而改变，与页面重新渲染无关 -->
        <h2>{{newI}}</h2>
        <input type="text" v-model="where.qqq">
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        Vue.filter('toFix',function(val){
            return (val/100).toFixed(2)
        })
        Vue.filter('xdd',function(val){
            return val+'$'
        })
    
        //过滤器和自定义指令的this都不是当前实例
        const vm = new Vue({
            el:"#app",
            data:{
                name:"QQQ",
                money:'1000',
                where:{
                    qqq:''
                }
            },

            computed: {
                //这里的属性也是不能和data中的属性重名
                // newI:function(){
                //     //依赖：在（同步函数）中使用了当前实例的那些属性，这个计算属性就是依赖那些属性
                //     //只要依赖发生改变这个函数就会执行
                //     //setTimeout在这里是不生效，因为数据已经更新完毕了
                //     console.log('cp')
                //     return this.where.qqq + '$'
                // }
                //上面这种是简写，相当于只写了get没有写set
                newI:{
                    get(){
                        console.log('cp')
                        return this.where.qqq + '$'
                    },
                    set(val){
                        console.log(val)
                        this.where.qqq = val
                    }
                }

            },  
            filters:{
                fixd(val){
                    //window
                    return val+'hhhh';
                }
            },
            methods: {
              fn(){
                  console.log('me')
                return this.where.qqq + '$'
              }  
            },
        })
    </script>
</body>
</html>